<template>
    <div>
        <div style="border: 2px solid #E6E6E6 ;
            background-color: white;width: 320px;height: 260px">
            <vue-esign ref="esign" :width="320" :height="260" :isCrop="isCrop"
                       :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor"/>
        </div>
        <el-button @click="handleReset">清空画板</el-button>
        <el-button @click="handleGenerate('save')">保存</el-button>
    </div>
</template>

<script>
    import axios from "axios";
    import request from "~/utils/request";

    export default {
        name: "SignTest",
        data() {
            return {
                user: {},
                props: ['user'],
                lineWidth: 6,
                lineColor: 'red',
                bgColor: '',
                resultImg: '',
                resultImgurl: '',
                isCrop: false,
            };
        },
        methods: {
            //清空画板
            handleReset() {
                this.$refs.esign.reset()
            },
            // 保存
            async handleGenerate(val) {
                try {
                    // 生成 base64 格式的图片
                    // 将 base64 格式的图片赋值给 this.resultImg
                    this.resultImg = await this.$refs.esign.generate();
                    // 调用 uploadImage 函数，上传图片并获取返回的图片地址
                    const url = await this.uploadImage(this.resultImg, val);
                    console.log("url:" + url)
                    // 触发父组件事件，将图片地址传递给父组件
                    this.$emit('updateSignImg', url);
                } catch (err) {
                    // 处理错误情况，比如画布没有签字或上传失败时
                    this.$emit('updateSignImg', '');
                }
            },

            // 定义一个函数，用于上传图片并获取返回的图片地址
            async uploadImage(base64Img, val) {
                // 调用 base64ImgtoFile 函数，将 base64Img 转换为 File 对象
                let imgFile = this.base64ImgtoFile(base64Img);

                // 创建 FormData 对象，用于上传文件
                const formData = new FormData();
                // 添加 file 属性，并指定文件名
                formData.append('file', imgFile);

                // 设置 Content-Type 头部为 multipart/form-data
                const config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                //保存方法
                // 发送 POST 请求，上传图片并获取返回的图片地址
                const res = await axios.post('/api/files/upload', formData, config);
                if (res.data !== null && res.data !== "") {
                    this.$message.success('上传成功');
                    return `api/file/download/${res.data}`;
                }
            },

            // 定义一个函数，用于显示错误信息
            showError(err) {
                // 判断 err 是否有 message 属性，如果有则使用它作为错误信息，否则使用默认的错误信息
                const msg = err.message || '发生了一些错误，请重试！';
                // 调用 alert 函数，提示用户错误信息
                alert(msg);
            },

            base64ImgtoFile(dataurl, filename = 'sign') {
                let arr = dataurl.split(',')
                let mime = arr[0].match(/:(.*?);/)[1]
                let suffix = mime.split('/')[1]
                let bstr = atob(arr[1])
                let n = bstr.length
                let u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new File([u8arr], `${filename}.${suffix}`, {
                    type: mime
                })
            },

        }
    }
</script>

<style scoped>

</style>
